<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="门店列表" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>
        <view class="content">
            <view class="map-body">
                <map style="width: 100%;height: 100%;" id="map"
                     :scale="11"
                     :enable-3D="true"
                     :show-compass="true"
                     :enable-overlooking="true"
                     :enable-traffic="true"
                     :latitude="latitude"
                     :longitude="longitude"
                     :markers="covers">
                </map>
            </view>
            <scroll-view class="store-list" scroll-y>
                <view class="coreshop-margin-top-15" v-if="storeList.length>0">
                    <view class="coreshop-list menu-avatar" v-for="(item, key) in storeList" :key="key">
                        <view class="coreshop-list-item">
                            <image class="coreshop-avatar lg radius" :src="item.logoImage" mode="aspectFill"></image>
                            <view class="content">
                                <view class="coreshop-text-grey coreshop-padding-bottom-5">{{item.storeName|| ''}}</view>
                                <u-icon name="phone" size="16" :label="item.mobile"  @tap="doPhoneCall(item.mobile)"></u-icon>
                                <view class="u-line-2 coreshop-font-xs  coreshop-padding-top-5">
                                    地址：{{item.address}}
                                </view>
                            </view>
                            <view class="action" @click="goMarkers(item.latitude,item.longitude)">
                                <view class="coreshop-text-grey coreshop-font-xs coreshop-margin-bottom-10">{{item.distanceStr|| ''}}</view>
                                <view class="coreshop-width-fit-content coreshop-margin-bottom-10">
                                    <u-button text="上图定位" type="success" size="mini" />
                                </view>
                                <!-- #ifdef MP-WEIXIN  -->
                                <view class="coreshop-width-fit-content" @tap="goShopMap(item.address,item.latitude,item.longitude)">
                                    <u-button text="地图导航" type="success" size="mini" />
                                </view>
                                <!-- #endif  -->
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 无数据时默认显示 -->
                <view class="coreshop-emptybox" v-else>
                    <u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/history.png'" icon-size="150" text="暂无门店列表" mode="list"></u-empty>
                </view>

            </scroll-view>
        </view>
        <!-- 登录提示 -->
        <coreshop-login-modal></coreshop-login-modal>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                storeList: [],
                longitude: 0,
                latitude: 0,
                covers: [{
                    'longitude': 0,
                    'latitude': 0
                }],
                page: 1,
                limit: 30,
            };
        },
        onLoad() {
            this.getMyLocation();
        },
        methods: {
            // 获取自己的位置信息
            getMyLocation() {
                let _this = this;
                // #ifdef MP-WEIXIN
                wx.getFuzzyLocation({
                    type: 'wgs84',
                    success(res) {
                        _this.longitude = res.longitude;
                        _this.latitude = res.latitude;
                        _this.getStoreList();
                    },
                    fail: function () {
                        _this.$u.toast("获取您的经纬度坐标失败")
                    },
                    complete: function (res) {
                        if (!_this.longitude || !_this.latitude) {
                            _this.longitude = '0';
                            _this.latitude = '0';
                        }
                        _this.getStoreList();
                    }
                })
                // #endif
                // #ifndef MP-WEIXIN
                uni.getLocation({
                    type: 'wgs84',
                    success: function (res) {
                        _this.longitude = res.longitude;
                        _this.latitude = res.latitude;
                        _this.getStoreList();
                    },
                    fail: function () {
                        _this.$u.toast("获取您的经纬度坐标失败")
                    },
                    complete: function (res) {
                        if (!_this.longitude || !_this.latitude) {
                            _this.longitude = '0';
                            _this.latitude = '0';
                        }
                        _this.getStoreList();
                    }
                });
                // #endif
            },
            // 获取店铺列表信息
            getStoreList() {
                let _this = this;
                let data = {
                    'longitude': _this.longitude,
                    'latitude': _this.latitude,
                    'page': _this.page,
                    'limit': _this.limit,
                }
                _this.$u.api.storeList(data).then(res => {
                    if (res.status) {
                        _this.storeList = res.data;
                        let storeList = res.data;
                        if (storeList.length > 0) {
                            _this.longitude = storeList[0].longitude;
                            _this.latitude = storeList[0].latitude;
                            for (let i = 0; i < storeList.length; i++) {
                                let mark = {
                                    id: storeList[i].id,
                                    latitude: storeList[i].latitude,
                                    longitude: storeList[i].longitude,
                                    iconPath: '/static/images/map/location.png',
                                    width: 15,
                                    height: 23,
                                }
                                _this.covers.push(mark);
                            }
                        }
                    } else {
                        _this.$u.toast("门店信息获取失败")
                    }
                });
            },
            //查看所在坐标地图位置
            goShopMap(address,latitude, longitude) {
                let plugin = requirePlugin('routePlan');

                // #ifdef MP-WEIXIN
                const txMapkey = this.$store.state.config.qqMapKey; //使用在腾讯位置服务申请的key
                const referer = this.$store.state.config.shopName; //调用插件的app的名称
                let endPoint = JSON.stringify({  //终点
                    'name': address,
                    'latitude': latitude,
                    'longitude': longitude
                });

                wx.navigateTo({
                    url: 'plugin://routePlan/index?key=' + txMapkey + '&referer=' + referer + '&endPoint=' + endPoint

                });
                // #endif
            },
            doPhoneCall(phome) {
                if (phome != 0) {
                    uni.makePhoneCall({
                        phoneNumber: phome
                    });
                }
            },
            goMarkers(latitude, longitude) {
                this.longitude = longitude;
                this.latitude = latitude;
            }
        }
    };
</script>

<style scoped lang="scss">
    @import "storeMap.scss";
</style>
